<template>
  <!-- <el-dialog :visible="centerDialogVisible" title="派发巡检问题工单" width="1100px" destroy-on-close> -->
  <el-form ref="ruleFormRef" :model="formsparms" :rules="formRules" label-width="auto" label-position="top"
    v-loading="isLoading">
    <div class="flex">
      <div class="border-r-[1px] border-r-[#DCDFE6] dark:border-r-[#3A3E50] pr-[16px]" :class="formsparms.sellMethod == 1 ? 'w-[70%] justify-between' : 'w-[70%]'
        ">
        <el-row :gutter="30">
          <re-col :value="12" :xs="24" :sm="24">
            <el-form-item label="工单标题" prop="workOrderTitle">
              <el-input v-model="formsparms.workOrderTitle" clearable placeholder="请输入工单标题" />
            </el-form-item>
          </re-col>
          <re-col :value="12" :xs="24" :sm="24">
            <el-form-item label="工单类型" prop="workOrderType">
              <el-select v-model="formsparms.workOrderType" placeholder="请选择工单类型">
                <el-option label="自定义工单" :value="1" />
                <el-option label="巡检工单" :value="2" />
              </el-select>
            </el-form-item>
          </re-col>
          <re-col :value="12" :xs="24" :sm="24">
            <el-form-item label="派发方式" prop="sellMethod">
              <el-radio-group v-model="formsparms.sellMethod">
                <el-radio v-for="item in WORKORDER_DISPATCH_TYPE" :key="item.value" :value="item.value">
                  {{ isNullOrEmpty( item.label ) }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </re-col>
          <re-col :value="12" :xs="24" :sm="24" v-if="formsparms.sellMethod === 1">
            <el-form-item label="工单流程" prop="processId">
              <processesselect v-model="formsparms.processId" clearable placeholder="请选择工单流程" :style="{ width: '100%' }"
                @processData="handechange" @blur="formValidateField(ruleFormRef, 'processId')"></processesselect>
            </el-form-item>
          </re-col>
          <re-col :value="12" :xs="24" :sm="24" v-if="formsparms.sellMethod == 2">
            <el-form-item label="通知方式" prop="noticeType">
              <el-checkbox-group v-model="formsparms.noticeType">
                <el-checkbox v-for="item in WORKORDER_NOTICE_TYPE" :key="item.value" :value="item.value">
                  {{ isNullOrEmpty( item.label ) }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </re-col>
          <re-col :value="12" :xs="24" :sm="24" v-if="formsparms.sellMethod === 2">
            <el-form-item label="处理人" prop="handleUid">
              <authorizeuser v-model="formsparms.handleUid" clearable :isid="1" placeholder="请选择"
                :style="{ width: '100%' }" @blur="formValidateField(ruleFormRef, 'handleUid')"/>
            </el-form-item>
          </re-col>
          <re-col :value="24" :xs="24" :sm="24">
            <el-form-item label="工单描述" prop="workOrderDesc">
              <el-input v-model="formsparms.workOrderDesc" :autosize="{ minRows: 4 }" type="textarea" clearable
                placeholder="请输入工单描述" />
            </el-form-item>
          </re-col>
          <re-col :value="24" :xs="24" :sm="24">
            <el-form-item label="巡检问题">
              <pure-table :data="formtablist" :columns="initPureTableConfig(roleTableConfig)"  :isShowPag="false">
              </pure-table>
            </el-form-item>
          </re-col>
          <!-- <re-col :value="24" :xs="24" :sm="24">
              <el-form-item label="工单照片" prop="workOrderImg">
                <ReUpload
                  v-model:files="formsparms.workOrderImg"
                  :limit="1"
                ></ReUpload>
              </el-form-item>
            </re-col> -->
        </el-row>
        <div class="flex justify-end mt-5">
          <el-button @click="closedilog(0)">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </div>
      </div>
      <div class="w-[30%] flex justify-center mb-[40px]" v-if="formsparms.sellMethod === 1">
        <el-steps direction="vertical" :active="0" v-if="formsparms.processId">
          <el-step :title="item.stepName" v-for="(item, index) in processData">
            <template #description>
              <div class="flex flex-wrap gap-[10px]">
                <div class="mr-[10px] whitespace-nowrap" v-for="(items, index) in item.operateUser">
                  {{ isNullOrEmpty( items.nickname ) }}
                </div>
              </div>
            </template>
          </el-step>
        </el-steps>
      </div>
    </div>
  </el-form>
  <!-- </el-dialog> -->
</template>

<script setup lang="ts">
import {isNullOrEmpty,initPureTableConfig} from '@/utils/functions'
import { WORKORDER_DISPATCH_TYPE, WORKORDER_NOTICE_TYPE } from "@/constant/workorder-mangenment";
import authorizeuser from "@/components/select/authorizeuser/authorizeuserScreen.vue";
import processesselect from "@/components/select/processesselect/processesSelectScreen.vue";
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { sendOrder } from "@/api/screen/lnspection-tasks/index";
import { ElMessage } from "element-plus";
import { usePageVariablesStoreHook } from "@/store/modules/pageVariables";
import { formValidateField } from '@/utils/functions'
const screen = usePageVariablesStoreHook().getScreen();
const props = defineProps({
  formtablist: [],
  closedilog: {
    type: Function,
    required: true
  },
  missionId: {
    type: String || Number,
    required: true
  },
  isLoading: {
    type: Boolean,
    required: false
  }
});
const formsparms = ref({
  workOrderTitle: "",
  sellMethod: null,
  processId: null,
  workOrderType: null,
  handleUid: null,
  missionId: null,
  workOrderDesc: null,
  noticeType: [],
  missionDetailIds: props.formtablist
});
const ruleFormRef = ref();
//流程数据
const processData = ref([]);
const formRules = reactive(<FormRules>{
  workOrderTitle: [
    { required: true, message: "请输入工单标题", trigger: "blur" }
  ],
  sellMethod: [{ required: true, message: "请选择派发方式", trigger: "blur" }],
  processId: [{ required: true, message: "请选择工单流程", trigger: "blur" }],
  workOrderType: [
    { required: true, message: "请选择工单类型", trigger: "blur" }
  ],
  handleUid: [{ required: true, message: "请选择处理人", trigger: "blur" }],
  noticeType: [{ required: true, message: "请选择通知方式", trigger: "blur" }],
  workOrderDesc: [
    { required: true, message: "请输入工单描述", trigger: "blur" }
  ],
  workOrderImg: [{ required: true, message: "请上传工单图片", trigger: "blur" }]
});
const roleTableConfig = [
  { prop: "id", label: "设施编号" },
  { prop: "facilitType", label: "设施类型" },
  { prop: "inspectionIssue", label: "巡检问题",showOverflowTooltip:true }
];
const handechange = e => {
  processData.value = e.node;
};
const submitForm = () => {
  formsparms.value.missionDetailIds = props.formtablist.map(item => item.id)
  formsparms.value.missionId = props.missionId
  ruleFormRef.value.validate(valid => {
    if (valid) {
      sendOrder({ ...formsparms.value, projectId: screen.project.id }).then(res => {
        if (res.code === 200) {
          ElMessage({
            type: "success",
            message: res.msg
          });
          props.closedilog(1)
        } else {
          ElMessage({
            type: "error",
            message: res.msg
          });
        }
      });
    }
  });
};
</script>
